<template>
    <div class="box">
        <a-row type="flex" justify="space-between">
            <a-col class="headline" :span="12"> 预警基本设置</a-col>
        </a-row>
        <div class="content">
            <a-row type="flex" justify="space-between">
                <a-col class="item">
                    <div class="box-item">
                        <div class="title">基站设备离线状态</div>
                        <a-switch v-model:checked="isApOfflineWarning" />
                        <div class="form">
                            <span> 超过 </span>
                            <a-input v-model:value="warningApOffline" class="input"></a-input>
                            <span> 分 </span>
                        </div>
                    </div>
                </a-col>
                <a-col class="item">
                    <div class="box-item">
                        <div class="title">价签设备离线状态</div>
                        <a-switch v-model:checked="isJqOfflineWarning" />
                        <div class="form">
                            <span> 超过 </span>
                            <a-input v-model:value="warningJqOffline" class="input"></a-input>
                            <span> 分 </span>
                        </div>
                    </div>
                </a-col>
                <a-col class="item">
                    <div class="box-item">
                        <div class="title">下发刷新设备失败</div>
                        <a-switch v-model:checked="isDevDownWarning" />
                        <div class="form">
                            <span> 超过 </span>
                            <a-input v-model:value="warningDevDown" class="input"></a-input>
                            <span> 分 </span>
                        </div>
                    </div>
                </a-col>
            </a-row>
            <a-row type="flex" style="margin-top: 20px" justify="space-between">
                <a-col class="item">
                    <div class="box-item">
                        <div class="title">价签设备电量报警</div>
                        <a-switch v-model:checked="isPowerWarning" />
                        <a-row>
                            <a-col :span="13">
                                <div style="width: 160px" class="form">
                                    <span> 低于 </span>
                                    <a-input v-model:value.number="batteryPercentage" class="input"></a-input>
                                    <span> % </span>
                                </div>
                            </a-col>
                            <a-col :span="11">
                                <div style="width: 160px" class="form">
                                    <span> 超过 </span>
                                    <a-input v-model:value.number="batteryMinutes" class="input"></a-input>
                                    <span> 分 </span>
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                </a-col>
                <a-col class="item">
                    <div class="box-item">
                        <div class="title">价签环境温度报警</div>
                        <a-switch v-model:checked="isTemperatureWarning" />
                        <a-row>
                            <a-col :span="16">
                                <div style="width: 200px" class="form">
                                    <span> 超出 </span>
                                    <a-input v-model:value.number="minTemperature" class="input"></a-input>
                                    <span>-</span>
                                    <a-input v-model:value.number="maxTemperature" class="input"></a-input>
                                    <span> ℃ </span>
                                </div>
                            </a-col>
                            <a-col :span="8">
                                <div style="width: 140px" class="form">
                                    <span> 超过 </span>
                                    <a-input v-model:value.number="temperatureMinutes" class="input"></a-input>
                                    <span> 分 </span>
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                </a-col>
            </a-row>
        </div>
        <a-row type="flex" justify="end">
            <a-button @click="handleSave" type="primary" ghost style="margin-top: 10px">保存</a-button>
        </a-row>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
import useMerchant from '../useMerchant';
import { editMerchantExpand } from '@/api/merchant';
import { message } from 'ant-design-vue';
// interface State {
//     isApOfflineWarning: boolean;
//     warningApOffline: number;
//     isJqOfflineWarning: boolean;
//     warningJqOffline: number;
//     isDevDownWarning: boolean;
//     warningDevDown: number;
//     isPowerWarning: boolean;
//     warningPower: string;
//     isTemperatureWarning: boolean;
//     warningTemperature: string;
//     id: number | string;
// }
// interface formData {
//     batteryPercentage: number;
//     batteryMinutes: number;
//     minTemperature: number;
//     maxTemperature: number;
//     temperatureMinutes: number;
// }
export default defineComponent({
    props: {
        data: {
            type: Object,
            default: () => false,
        },
    },
    setup(props, { emit }) {
        const state = reactive({
            // 是否基站离线预警
            isApOfflineWarning: false,
            // 基站离线状态超过 分钟
            warningApOffline: 0,
            // 	是否价签离线预警
            isJqOfflineWarning: false,
            // 	价签离线状态超过 分钟
            warningJqOffline: 0,
            // 是否下发刷新设备失败
            isDevDownWarning: false,
            // 下发刷新设备失败超过‘’分钟
            warningDevDown: 0,
            // 是否电量报警
            isPowerWarning: false,
            // 	价签电量报警格式（30,30）
            warningPower: '30,30',
            // 	温度报警：格式（0-40,30）
            warningTemperature: '0-40,30',
            isTemperatureWarning: false,

            id: 0,
        });
        const formData = reactive({
            batteryPercentage: 0,
            batteryMinutes: 0,
            minTemperature: 0,
            maxTemperature: 0,
            temperatureMinutes: 10,
        });
        watch(
            () => props.data,
            (data) => {
                const {
                    isApOfflineWarning,
                    warningApOffline,
                    isJqOfflineWarning,
                    warningJqOffline,
                    isDevDownWarning,
                    warningDevDown,
                    isPowerWarning,
                    warningPower,
                    isTemperatureWarning,
                    warningTemperature,
                    id,
                } = data as NormalObj;
                console.log(isApOfflineWarning);
                state.isApOfflineWarning = isApOfflineWarning;
                state.warningApOffline = warningApOffline;
                state.isJqOfflineWarning = isJqOfflineWarning;
                state.warningJqOffline = warningJqOffline;
                state.isDevDownWarning = isDevDownWarning;
                state.warningDevDown = warningDevDown;
                state.isPowerWarning = isPowerWarning;
                state.warningPower = warningPower;
                state.isTemperatureWarning = isTemperatureWarning;
                state.id = id;

                const warningNum = warningPower.split(',');
                const warningTemperatureNum = warningTemperature.split(',');
                const TemperatureNum = warningTemperatureNum[0].split('-');
                formData.temperatureMinutes = warningTemperatureNum[1];
                formData.minTemperature = Number(TemperatureNum[0]);
                formData.maxTemperature = Number(TemperatureNum[1]);
                formData.batteryPercentage = Number(warningNum[0]);
                formData.batteryMinutes = Number(warningNum[1]);
                console.log({ ...formData });
            }
        );

        const handleSave = async () => {
            state.warningPower = formData.batteryPercentage + ',' + formData.batteryMinutes;
            state.warningTemperature =
                formData.minTemperature + '-' + formData.maxTemperature + ',' + formData.temperatureMinutes;
            await editMerchantExpand({
                ...state,
            });

            message.success('保存成功');
            emit('onCancel');
        };

        return { handleSave, ...toRefs(state), ...toRefs(formData) };
    },
});
</script>

<style lang="scss" scoped>
.content {
    .item {
        background: #ffffff;
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        padding: 30px 24px;
        .box-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .title {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #161616;
            margin-bottom: 10px;
        }
        .form {
            display: flex;
            width: 197px;
            height: 34px;
            background: #ffffff;
            border: 1px solid #e6e6e6;
            border-radius: 6px;

            .input {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                flex: 1;
                text-align: center;
                border: none;
            }
            span {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #161616;
                display: inline-block;
                padding: 0 12px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>
